<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;padding: 0;
        }
        .box{
            width: 100px;height: 100px;background: orange;position: absolute;left: 0;top: 0;
        }
        .line{
            width: 2px;height: 500px;background: black;position: absolute;left: 500px;top: 0;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="line"></div>
</body>
<script>
    const obox=document.querySelector(".box")
    let timer;
    let speed=2;
    let target=500;
    
    obox.onclick=function(){
        move(obox)
    }

    function move(ele){
        clearInterval(timer);
        timer=setInterval(function(){
            // 向上取整 （浏览器最小识别的像素是一像素，0.5以上会四射五入成1, 0.4以下会四舍五入成0， 所以要向上取整，）
            let speed=Math.ceil((target-ele.offsetLeft)/7)
            if(target===ele.offsetLeft){
                clearInterval(timer);
                ele.style.left=target + "px"
            }else{
                ele.style.left=ele.offsetLeft + speed + "px"
            }
        },30)
    }
</script>
</html>